<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
    <script src="./a1.js"></script>
    <script src="./b1.js"></script>
    <script src="./c1.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        h1{height: 50px;background: hotpink;text-align: center;font-size: 26px;line-height: 50px;position: fixed;top: 0;left: 0;right: 0;}
        
        .top_nav ul{list-style: none;height: 40px;line-height: 40px;display: flex;justify-content: space-around;margin-top: 50px;}
        .product{height: calc(100vh - 140px);overflow: auto;}
       .product ul{list-style: none;height: 40px;line-height: 40px;display: flex;justify-content: space-around;flex-wrap: wrap;}
       .product ul li{width: 48%;}
       .product ul li img{width: 100%;}
       .product ul li h3{height: 30px;line-height: 30px;overflow: hidden;font-weight: normal;}
       .product ul li p span{color: red;font-size: 16px;}
       .footer_nav{width:100%;height: 50px;background: #ccc;position: fixed;bottom: 0px;font-size: 18px;}
       .footer_nav ul{display: flex;justify-content: space-around;list-style: none;line-height: 50px;}
    </style>
</head>
<body>
    <div id="app">
        <top_title></top_title>
        <top_nav class="top_nav"></top_nav>
        <product class="product"></product>
        <footer_nav class="footer_nav"></footer_nav>
    </div>
    
    <template id="tit">
        <div>
            <h1>{{mes}}</h1>
        </div>
    </template>

    <template id="top_nav">
        <div>
            <ul>
                <li v-for='(item,index) in list' @click='liClick(index)' :style='{color:currIndex == index ? "red" : "#333"}'>{{item}}</li>
            </ul>
        </div>
    </template>

    <template id="product">
        <div>
            <ul>
                <li v-for='(item,index) in list[proIndex]'>
                    <img :src="item.show.img">
                    <h3>{{item.title}}</h3>
                    <p><span>￥{{item.price}}</span></p>
                </li>
            </ul>
        </div>
    </template>

    <template id="footer_nav">
        <div>
            <ul>
                <li v-for='(item,index) in list' @click='footerClick(index)' :style='{color:footerIndex == index ? "hotpink" : ""}'>{{item}}</li>
            </ul>
        </div>
    </template>
    <script type="module">
        import Bus from './eventBus.js';
        console.log(pop.data.list)
        new Vue({
            el:'#app',
            data:{
                contentList:['']
            },
            components:{
                top_title:{
                    template:'#tit',
                    data(){
                        return {
                            mes:'购物车'
                        }
                    }
                },
                top_nav:{
                    template:'#top_nav',
                    data(){
                        return {
                            list:['流行','新款','精选'],
                            currIndex:0
                        }
                    },
                    methods: {
                        liClick(i){
                            this.currIndex = i,
                            Bus.$emit('getData',this.currIndex)
                        },
                       
                    },
                    
                },
                product:{
                    template:'#product',
                    data(){
                        return {
                            list:[pop.data.list,sell.data.list,news.data.list],
                            proIndex :0
                        }
                    },
                    created() {
                        Bus.$on('getData',(r) => {
                            this.proIndex = r
                            // console.log(r)
                        })
                    },
                },
                footer_nav:{
                    template:'#footer_nav',
                    data(){
                        return {
                            list:['首页','分类','购物车','我的'],
                            footerIndex:0
                        }
                    },
                    methods: {
                        footerClick(i){
                            this.footerIndex = i
                        }
                    },
                }
            },
           
            
        })
    </script>
</body>
</html>